import React, { useEffect, useState, Suspense } from 'react';
import { Layout, Menu, message, Button, Spin } from 'antd';
import { Route, withRouter } from 'react-router-dom';
import {
  UserOutlined,
  FileTextOutlined,
  ContainerOutlined,
  CoffeeOutlined,
} from '@ant-design/icons';
import Api from '../../util/apiUrl';
import './index.css';
// import PersonalInfo from './personalInfo';
const PersonalInfo = React.lazy(() => import('./personalInfo'));
// import PublishArticle from './publishArticle';
const PublishArticle = React.lazy(() => import('./publishArticle'));
// import ArticleList from './articleList';
const ArticleList = React.lazy(() => import('./articleList'));
// import AlterArticle from './alterArticle';
const AlterArticle = React.lazy(() => import('./alterArticle'));
// import Guestbook from './guestbook';
const Guestbook = React.lazy(() => import('./guestbook'));
// import Live from './live';
const Live = React.lazy(() => import('./live'));
// import AddLive from './addLive';
const AddLive = React.lazy(() => import('./addLive'));
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const Index = (props) => {
  console.log('index props', props);
  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([
    'personalInfo',
  ]);
  useEffect(() => {
    Api.isLogin().then((res) => {
      if (res.data.noSession) {
        // 没有登陆
        console.log('islogin判断', res);
        message.error('请先登陆');
        props.history.push('/login/');
      }
    });
  }, []);

  const loginout = () => {
    Api.loginout()
      .then((res) => {
        console.log('登出成功', res);
        if (!res.data.isLogin) {
          props.history.push('/login/');
          message.success('登出成功');
        window.localStorage.setItem('openId', '')
          
        }
      })
      .catch((err) => {
        console.log('登出失败', err);
        message.error('登出失败:' + err);
      });
  };

  return (
    <>
      <Layout>
        <Header className="header">
          <div className="logo" />
          <div className="logout">
            <Button type="primary" onClick={loginout}>
              注销
            </Button>
          </div>
        </Header>
        <Layout style={{ height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
          <Sider width={200} className="site-layout-background">
            <Menu
              onClick={(e) => {
                console.log(e);
                setDefaultSelectedKeys(e.key);
                switch (e.key) {
                  case 'personalInfo':
                    props.history.push('/admin/personalInfo/');
                    break;
                  case 'publishArticle1':
                    props.history.push('/admin/publishArticle/');
                    break;
                  case 'publishArticle2':
                    props.history.push('/admin/articleList/');
                    break;
                  case 'publishArticle3':
                    props.history.push('/admin/alterArticle/');
                    break;
                  case 'guestbook':
                    props.history.push('/admin/guestbook/');
                    break;
                  case 'live':
                    props.history.push('/admin/live/');
                    break;
                  case 'addLive':
                    props.history.push('/admin/addLive/');
                    break;
                }
              }}
              mode="inline"
              selectedKeys={defaultSelectedKeys}
              defaultOpenKeys={['publishArticle']}
              style={{ minHeight: '100%', borderRight: 0 }}
            >
              <Menu.Item key="personalInfo" icon={<UserOutlined />}>
                个人信息
              </Menu.Item>
              {/* <Menu.Item key="sub2" icon={<UserOutlined />}>
                文章发布
              </Menu.Item> */}
              <SubMenu
                key="publishArticle"
                icon={<FileTextOutlined />}
                title="文章"
              >
                <Menu.Item key="publishArticle1">文章发布</Menu.Item>
                <Menu.Item key="publishArticle2">文章列表</Menu.Item>
                <Menu.Item key="publishArticle3">文章修改</Menu.Item>
              </SubMenu>
              <Menu.Item key="guestbook" icon={<ContainerOutlined />}>
                留言
              </Menu.Item>
              <SubMenu key="liveModule" icon={<CoffeeOutlined />} title="生活">
                <Menu.Item key="addLive">添加生活</Menu.Item>
                <Menu.Item key="live">生活列表</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout
            style={{
              padding: '0 24px 24px',
              height: 'calc(100vh - 64px)',
              overflow: 'unset',
            }}
          >
            <Suspense
              fallback={
                <div className='loadingModule'>
                  <Spin size="large" tip="加载模块中,请稍等.." />{' '}
                </div>
              }
            >
              <Route
                path="/admin/personalInfo/"
                exact
                component={PersonalInfo}
              />
              <Route
                path="/admin/publishArticle/"
                exact
                component={PublishArticle}
              />
              <Route path="/admin/articleList/" exact component={ArticleList} />
              <Route
                path="/admin/alterArticle/"
                exact
                component={AlterArticle}
              />
              <Route
                path="/admin/alterArticle/:id"
                render={() => (
                  <AlterArticle
                    changeDefaultSelectedKeys={() => {
                      setDefaultSelectedKeys(['publishArticle3']);
                      console.log('changeDefaultSelectedKeys');
                    }}
                  />
                )}
              />
              <Route path="/admin/guestbook/" exact component={Guestbook} />
              <Route path="/admin/live/" exact component={Live} />
              <Route path="/admin/addLive/" exact component={AddLive} />
            </Suspense>
          </Layout>
        </Layout>
      </Layout>
    </>
  );
};

export default withRouter(Index);
